<template>
  <div class="dashboard-container">
    <h1 style="text-align: center">个人信息管理</h1>
    <el-form ref="ruleForm" :model="updateList" :rules="roles" label-width="150px"
             style=" padding: 20px; background-color: #cfefc6; border-radius: 8px;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); max-width: 850px; margin: 10px auto;">
      <el-form-item label="用户名称" prop="userName">
        <el-input v-model="updateList.userName" clearable maxlength="20" placeholder="请输入用户名称" show-word-limit
                  style="width: 80%"/>
      </el-form-item>
      <el-form-item label="性别" prop="sex">
        <el-radio-group v-model="updateList.sex">
          <el-radio label="男" value="男">男</el-radio>
          <el-radio label="女" value="女">女</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="密码" prop="userPassword">
        <el-input v-model="updateList.userPassword" clearable maxlength="20" placeholder="请输入密码" show-word-limit
                  style="width: 80%"/>
      </el-form-item>
      <el-form-item label="手机号" prop="phoneNumber">
        <el-input v-model="updateList.phoneNumber" clearable maxlength="11" placeholder="请输入手机号" show-word-limit
                  style="width: 80%"/>
      </el-form-item>
      <el-form-item label="身份证" prop="idCard">
        <el-input v-model="updateList.idCard" clearable maxlength="18" placeholder="请输入身份证" show-word-limit
                  style="width: 80%"/>
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input v-model="updateList.remark" clearable maxlength="100" placeholder="请输入备注" show-word-limit
                  style="width: 80%"/>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button style="width:80px; margin-bottom:30px;
        margin-left:40%; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        border-radius: 8px; background-color: #cfefc6; margin-top: 20px"
                 @click="updateUser('ruleForm')">修改</el-button>
      <el-button style="width:80px; margin-bottom:30px;
        margin-left:120px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        border-radius: 8px; background-color: #ffffff;"
                 @click="checkUser('ruleForm')">重置</el-button>
    </span>
  </div>

</template>

<script>
import {mapGetters} from 'vuex'
import {selectAllUser, updateUser} from "@/api/user";

export default {
  name: 'user',
  computed: {
    ...mapGetters([
      'userId',
      'userName',
      'roleName'
    ])
  },
  data() {
    return {
      userId1: this.$store.getters.userId,
      userName1: this.$store.getters.userName,
      roleName1: this.$store.getters.roleName,
      // 该列表应通过动态获取用户角色数据进行填充
      roleList: [{
        value: '员工',
        label: '员工'
      }],
      updateButtonController: false,
      updateList: {
        userName: '',
        userPassword: '',
        sex: '',
        phoneNumber: '',
        idCard: '',
        remark: ''
      },
      roles: {
        userName: [
          {required: true, trigger: 'blur', message: '用户名不能为空'},
          {min: 1, max: 20, message: '用户名长度在1-20个字符之间', trigger: 'blur'}
        ],
        sex: [
          {required: true, trigger: 'blur', message: '性别不能为空'},
        ],
        userPassword: [
          {required: true, trigger: 'blur', message: '密码不能为空'},
          {min: 6, max: 20, message: '密码长度在6-20个字符之间', trigger: 'blur'}
        ],
        phoneNumber: [
          {required: true, trigger: 'blur', message: '手机号不能为空'},
          {min: 11, max: 11, message: '手机号长度11个字符', trigger: 'blur'}
        ],
        idCard: [
          {required: true, trigger: 'blur', message: '身份证不能为空'},
          {min: 18, max: 18, message: '身份证长度18个字符', trigger: 'blur'}
        ],
      },
    }
  },
  mounted() {
    this.selectUser()
  },
  methods: {
// 页面的方法和事件
    selectUser() {
      selectAllUser({
        userId: this.userId1,
        userName: this.userName1,
        roleName: this.roleName1,
      }).then(
        response => {
          console.log(response.data)
          this.updateList = response.data[0]
        }
      )
    },
    checkUser() {

      this.selectUser()
    },

    updateUser(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          updateUser({
            userTableId: this.updateList.userTableId,
            userId: this.updateList.userId,
            roleId: this.updateList.roleId,
            userName: this.updateList.userName,
            sex: this.updateList.sex,
            userPassword: this.updateList.userPassword,
            phoneNumber: this.updateList.phoneNumber,
            idCard: this.updateList.idCard,
            remark: this.updateList.remark
          }).then(
            response => {
              this.$message.success('修改成功')
              this.$store.dispatch('user/updateUserName', this.updateList.userName)
              this.selectUser()
            }
          )
        } else {
          return false
        }
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }

  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
